<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .td_center {
            text-align: center;
        }
    </style>
</head>
<body>
<button>批量删除</button>
<script>
    let books = [
        {id: 1, name: 'Java从入门到放弃', price: 80, createDate: '2020-07-01', count: 1},
        {id: 2, name: 'Vue从入门到放弃', price: 90, createDate: '2020-07-02', count: 1},
        {id: 3, name: 'Mysql从入门到放弃', price: 100.01, createDate: '2020-07-03', count: 1},
        {id: 4, name: '啥都从入门到放弃', price: 70.0001, createDate: '2020-07-04', count: 1},
        {id: 5, name: 'JavaScript从入门到放弃', price: 60.00, createDate: '2020-07-04', count: 1},
        {id: 6, name: 'JavaScript从入门到放弃', price: 50.00, createDate: '2020-07-04', count: 1}
    ];
    // 创建table标签
    let table = document.createElement("table");
    table.border = "1"; // 设置边框属性

    let thead = document.createElement("thead");
    let tbody = document.createElement("tbody");
    // 将thead和tbody添加到table标签中
    table.appendChild(thead);
    table.appendChild(tbody);
    // 将table添加到body标签中
    document.body.appendChild(table);
    // 编写标题
    // tr
    let tr = document.createElement("tr");
    thead.appendChild(tr);
    let th = document.createElement("th");
    // 创建复选框列
    let cb_select_all = document.createElement("input");
    cb_select_all.type = "checkbox"; // 指定input的类型
    cb_select_all.value = "1"; // 在开发习惯中，一般将checkbox设置为选中值为1
    cb_select_all.name = "cb_select_all";
    th.appendChild(cb_select_all);
    tr.appendChild(th);
    // 创建序号列
    th = document.createElement("th");
    th.textContent = "序号";
    tr.appendChild(th);
    // 创建书名列
    th = document.createElement("th");
    th.textContent = "书名";
    tr.appendChild(th);
    // 创建日期列
    th = document.createElement("th");
    th.textContent = "日期";
    tr.appendChild(th);
    // 创建单价列
    th = document.createElement("th");
    th.textContent = "单价";
    tr.appendChild(th);
    // 创建数量列
    th = document.createElement("th");
    th.textContent = "数量";
    tr.appendChild(th);
    // 创建操作列
    th = document.createElement("th");
    th.textContent = "操作";
    tr.appendChild(th);

    // 内容
    books.forEach((value, index) => {
        tr = document.createElement("tr");
        // 给tr添加属性data-index，且值为书本id
        tr.setAttribute("data-index", value.id);
        tbody.appendChild(tr);
        let td = document.createElement("td");
        let cb_select = document.createElement("input");
        cb_select.type = "checkbox";
        cb_select.value = "1";
        cb_select.name = "cb_select";
        td.appendChild(cb_select);
        tr.appendChild(td);
        td = document.createElement("td");
        td.textContent = value.id;
        td.className = "td_center";
        tr.appendChild(td);
        td = document.createElement("td");
        td.textContent = value.name;
        td.className = "td_center";
        tr.appendChild(td);
        td = document.createElement("td");
        td.textContent = value.createDate;
        td.className = "td_center";
        tr.appendChild(td);
        td = document.createElement("td");
        td.textContent = value.price;
        td.className = "td_center";
        tr.appendChild(td);
        td = document.createElement("td");
        td.innerHTML = `
            <button type="button">-</button>
            ${value.count}
            <button type="button">+</button>
        `;
        td.className = "td_center";
        tr.appendChild(td);
        td = document.createElement("td");
        td.className = "td_center";
        td.innerHTML = `
        <button type="button">编辑</button>
        <button type="button" onclick="btn_delete(event, ${index})">删除</button>
    `;
        tr.appendChild(td);
    });

    /**
     * 删除功能
     * @param e
     */
    function btn_delete(e, index) {
        console.log("删除");
        // 纯DOM操作
        // parentNode：父节点
        // parentElement：父元素都一样
        e.target.parentElement.parentElement.remove();

        // 从数组中删除
        // 使用索引删除，单行删除没有问题，但批量删除不行，所以不推荐
        books.splice(index, 1);
        console.log(books);
        // 先删除数组中的数据
        // 然后直接刷新页面
    }

</script>
</body>
</html>